<template>
<v-container>
  <v-form
      ref="form"
      :lazy-validation="false"
    >
    <v-card class="mb-4">
      <v-card-title class="pa-2 justify-space-between">
        <div>游客名单</div>
        <div>
          <v-btn color="info" outlined @click="addTourist">{{ $t('actions.add') }}</v-btn>
        </div>
      </v-card-title>
      <v-divider />
      <v-card-text class="px-0">
        <el-table
          :data="touristData"
          border>
          <el-table-column
            fixed="left"
            type="index"
            label="序号"
            width="60">
          </el-table-column>
          <el-table-column
            label="所属客户"
            width="180">
            <template slot="header">
              <span class="mr-1">所属客户</span>
              <small style="color: red">({{$t('other.required')}})</small>
            </template>
            <template slot-scope="{ row }">
              <v-select
                v-model="row.company_id"
                :items="childs"
                item-text="company_name"
                item-value="id"
                outlined
                dense
                hide-details
                :rules="[rules.required]"
                required
              ></v-select>
            </template>
          </el-table-column>
          <el-table-column
            label="游客类型"
            width="140">
            <template slot-scope="{ row }">
              <v-select
                v-model="row.type"
                :items="['成人', '儿童', '不占床', '婴儿', '老人', '领队']"
                outlined
                dense
                hide-details
              ></v-select>
            </template>
          </el-table-column>
          <el-table-column
            label="姓名"
            width="180">
            <template slot="header">
              <span class="mr-1">姓名</span>
              <small style="color: red">({{$t('other.required')}})</small>
            </template>
            <template slot-scope="{ row }">
              <v-text-field
                v-model="row.fullname"
                outlined
                single-line
                hide-details
                dense
                :rules="[rules.required]"
                required
              ></v-text-field>
            </template>
          </el-table-column>
          <el-table-column
            label="英文名"
            width="180">
            <template slot-scope="{ row }">
              <v-text-field
                v-model="row.fullname"
                outlined
                single-line
                hide-details
                dense
              ></v-text-field>
            </template>
          </el-table-column>
          <el-table-column
            label="性别"
            width="140">
            <template slot-scope="{ row }">
              <v-select
                v-model="row.sex"
                :items="['男', '女']"
                outlined
                dense
                hide-details
              ></v-select>
            </template>
          </el-table-column>
          <el-table-column
            label="证件类型"
            width="160">
            <template slot-scope="{ row }">
              <v-select
                v-model="row.certificate"
                :items="['身份证', '护照', '领队证', '导游证', '其他证件']"
                outlined
                dense
                hide-details
              ></v-select>
            </template>
          </el-table-column>
          <el-table-column
            label="证件号码"
            width="180">
            <template slot="header">
              <span class="mr-1">证件号码</span>
              <small style="color: red">({{$t('other.required')}})</small>
            </template>
            <template slot-scope="{ row }">
              <v-text-field
                v-model="row.fullname"
                outlined
                single-line
                hide-details
                dense
                :rules="[rules.required]"
                required
              ></v-text-field>
            </template>
          </el-table-column>
          <el-table-column
            label="证件有效期"
            width="180">
            <template slot-scope="{ row }">
              <v-text-field
                v-model="row.phone"
                outlined
                single-line
                hide-details
                dense
              ></v-text-field>
            </template>
          </el-table-column>
          <el-table-column
            label="签发日期"
            width="180">
            <template slot-scope="{ row }">
              <v-text-field
                v-model="row.phone"
                outlined
                single-line
                hide-details
                dense
              ></v-text-field>
            </template>
          </el-table-column>
          <el-table-column
            label="签发地"
            width="180">
            <template slot-scope="{ row }">
              <v-text-field
                v-model="row.phone"
                outlined
                single-line
                hide-details
                dense
              ></v-text-field>
            </template>
          </el-table-column>
          <el-table-column
            label="联系电话"
            width="180">
            <template slot-scope="{ row }">
              <v-text-field
                v-model="row.phone"
                outlined
                single-line
                hide-details
                dense
              ></v-text-field>
            </template>
          </el-table-column>
          <el-table-column
            label="国籍"
            width="180">
            <template slot-scope="{ row }">
              <v-text-field
                v-model="row.phone"
                outlined
                single-line
                hide-details
                dense
              ></v-text-field>
            </template>
          </el-table-column>
          <el-table-column
            label="备注"
            min-width="180">
            <template slot-scope="{ row }">
              <v-text-field
                v-model="row.phone"
                outlined
                single-line
                hide-details
                dense
              ></v-text-field>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            :label="$t('other.action')"
            width="80">
            <template slot-scope="{ $index, row }">
              <v-btn small color="warning" outlined @click="handleRmove($index, row)">{{ $t('actions.delete') }}</v-btn>
            </template>
          </el-table-column>
        </el-table>
      </v-card-text>
      <v-card-actions>
        <v-spacer />
        <v-btn color="primary" @click="save">{{ $t('actions.save') }}</v-btn>
      </v-card-actions>
    </v-card>
  </v-form>
</v-container>
</template>

<script>
export default {
  props: {
    value: [String, Object]
  },
  data() {
    return {
      touristData: [],
      rules: {
        required: value => !!value || 'required',
      }
    }
  },
  computed: {
    childs() {
      return this.value.childs || []
    },
  },
  methods: {
    // 添加游客
    addTourist() {
      this.touristData.push({
        company_id: undefined,
        type: '成人',
        certificate: '身份证',
        fullname: '',
        phone: '',
        email: ''
      })
    },
    // 删除游客
    handleRmove(index, row) {
      if(row.id) {
        this.$confirm(this.$t('tips.delete'), this.$t('other.tip'), {
          center: true,
          type: 'warning'
        }).then(() => {
          factorApi[type.del]({idArr: [row.id]}).then(() => {
            this.$message.success('success')
            this.touristData.splice(index, 1)
          })
        })
      } else {
        this.touristData.splice(index, 1)
      }
    },
    save() {
      if(this.$refs.form.validate()) {
        console.log(1)
      }
    }
  }
}
</script>

<style>

</style>